import React from 'react';
import Button from "../../../../node_modules/react-bootstrap/lib/Button";
import ListGroup from "react-bootstrap/lib/ListGroup";
import ListGroupItem from "react-bootstrap/lib/ListGroupItem";
import Modal from "../../../../node_modules/react-bootstrap/lib/Modal";
import MenuItem from 'react-bootstrap/lib/MenuItem';
import FormControl from 'react-bootstrap/lib/FormControls';
import EventProxy from '../../lib/eventproxy.js';
import LeftNav from '../../../../node_modules/material-ui/lib/left-nav';
import List from "../component/List.jsx";
import HttpRequest from './../HttpRequest.js';
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import Form from '../../src/component/formElement/Form.jsx';
import Label from '../../src/component/formElement/Label.jsx';
import Input from '../../src/component/formElement/Input.jsx';
import BSInput from "../../../../node_modules/react-bootstrap/lib/Input.js";
import Selector from '../../src/component/formElement/Selector.jsx'
import SelectList from '../../src/component/formElement/SelectList.jsx'
import msgFrontAgent from  '../msgFrontAgent.js'

var product_configs_all = [];
var PublishConfigManageTab = React.createClass({
    getInitialState: function () {
        return ({
            current_project: this.props.current_project,
            ListData: [], //配置数据
            ListItems: [], //左侧配置列表
            current_selected: null, //当前选中配置
            product_configs: []
        });
    },
    componentWillReceiveProps (newprops){
        this.setState({
            current_project: newprops.current_project
        }, function () {
            this.componentWillMount();
        });
    },
    componentWillMount: function () {
        HttpRequest.getAllPublishConfigs(this.state.current_project._id).success(function (configs) {
            if (configs.code != 500) {
                var listData = _.remove(configs.data, function (o) {
                    return o.project == this.state.current_project._id;
                }.bind(this));
                this.setState({
                    ListData: listData
                }, this._renderList)
            }
        }.bind(this)).error(function (err) {

        });
    },

    itemSelected: function (config) {
        //projects = [];
        HttpRequest.getPublishConfigById(config._id).success(function (res) {
            if (res.code == 500) {
                toastr.error(null, res.message);
            } else {
                this.setState({
                    current_selected: res.data
                });
            }
        }.bind(this)).error(function (err) {

        });

    },
    _renderList: function () {
        var items = [];
        this.setState({
            List: <List ListData={this.state.ListData}
                        ItemStyle={{cursor: "pointer"}}
                        SelectedItemStyle={{background:"#f3f3f3",cursor: "pointer"}}
                        onItemSelected={this.itemSelected}
                        itemDeleted={this.removePublishConfig}
                        ifEmpty={<span style={{color:"#969696",paddingLeft:"50px",fontSize:"14px",fontFamily:'Microsoft YaHei'}}>该项目没有发布配置！ </span>}
                        DeleteAble={false}
                        IconMap={[
                            {type:"mk",icon:<img src="/res/image/MK_h.png"/>},
                            {type:"app",icon:<img src="/res/image/iphone_h.png"/>},
                            {type:"app_plugin",icon:<i className="fa fa-plug" style={{fontSize:"23px"}} aria-hidden="true"/>}
                        ]}
            />
        });
        if (this.state.ListData.length > 0) {
            this.setState({
                //current_selected:(this.state.current_selected?this.state.current_selected:this.state.ListData[0])
                current_selected: this.state.ListData[this.state.ListData.length - 1]
            })
        }
    },

    removePublishConfig: function (config_id) {
        confirm("确定删除？", function () {
            HttpRequest.deletePublishConfig(config_id).success(function (resp) {
                if (resp.code != 500) {
                    this.componentWillMount();
                } else {
                    toastr.error(null, "删除失败");
                }
            }.bind(this)).error(function () {
                toastr.error(null, "删除失败");
            });
        }.bind(this))
    },

    addConfig: function (event, eventKey) {
        var count = 0;
        if (count == 0) {
            count = "";
        }
        this.state.ListData.map(function (item) {
            if (item.name == "new_" + eventKey + "_publishConfig" + count) {
                count++;
            }
        });
        var name = "new_" + eventKey + "_publishConfig" + count;
        var newConfig = {
            "type": eventKey,
            "name": name,
            "project": this.state.current_project._id,
            "extend_info": {
                "goodsName": null,
                "goodsTitle": null,
                "goods_intro": null,
                "supplier": null,
                "tags": []
            },
            "product_configs": [],
        }

        HttpRequest.addPublishConfig(newConfig).success(function (resp) {
            if (resp.code != 500) {
                this.componentWillMount();
            } else {
                toastr.error(null, "新建构建配置失败：" + resp.message);
            }
        }.bind(this)).error(function (err) {
            toastr.error(null, "新建构建配置失败");
        });

    },
    saveEdit: function (cfg_id, config_info) {
        HttpRequest.updatePublishConfig(cfg_id, config_info).success(function (resp) {
            if (resp.code == 500) {
                toastr.error(null, "更新配置信息失败");
            } else {
                this.componentWillMount();
                toastr.success(null, "更新配置信息成功");
            }
        }.bind(this)).error(function (err) {
            toastr.error(null, "新建构建配置失败");
        })
    },
    render: function () {
        var content_pageRight = null;
        if (this.state.ListData.length > 0) {
            content_pageRight = <PublishConfigDetail
                update={this.saveEdit}
                current_selected={this.state.current_selected}
                current_project={this.state.current_project}
            />
        } else {
            content_pageRight = <div style={{textAlign:"center"}}>

                <div style={{color:"#969696",marginTop:"50px",fontSize:"14px",fontFamily:'Microsoft YaHei'}}>
                    <i className="fa fa-exclamation-circle"
                       style={{fontSize:"48px",cursor:"pointer"}}/>
                    <br/>
                    该项目没有发布配置！
                </div>
            </div>
        }
        return (
            <div style={{height:"100%"}}>
                <div className="content_pageLeft">
                    <span className="info_title" style={{paddingLeft:"30px"}}>发布配置</span>
                    <DropdownButton bsStyle="primary"
                                    style={{backgroundColor:"#555",height: "25px",paddingTop: "2px"}}
                                    onSelect={this.addConfig}
                                    title="新建" id="new_product_config">
                        <MenuItem eventKey="mk">mk产品发布</MenuItem>
                        <MenuItem eventKey="app">移动产品发布</MenuItem>
                        <MenuItem eventKey="app_plugin">移动插件发布</MenuItem>
                    </DropdownButton>
                    <div style={{overflowY:"auto",height:"100%",maxHeight:"90%",marginTop:"5px"}}>
                        {this.state.List}
                    </div>

                </div>
                <div className="content_pageRight">
                    <span className="info_title">配置详情</span>
                    <div style={{width:"100%",height:"calc(100% - 63px)",marginTop: "20px"}}>
                        {content_pageRight}

                    </div>
                </div>

            </div>
        )
    }
});
export default PublishConfigManageTab;

import validate from'../../../../common/validate.js'
var PublishConfigDetail = React.createClass({
    getInitialState: function () {
        return ({
            current_selected: this.props.current_selected,
            current_project: this.props.current_project,
            productConfigs: [],
            form_data: {}
        });
    },

    componentWillReceiveProps: function (newProps) {
        this.setState({
            current_selected: newProps.current_selected,
            current_project: newProps.current_project,
            form_data: newProps.current_selected
        }, function () {
            this.componentDidMount();
        });
    },
    editProductConfig: function (configSelected) {
        var config = [];
        var config_ids = [];
        configSelected.map(function (item) {
            config_ids.push(item._id);
            config.push(item);
        });
        var current_selected = this.state.current_selected;
        current_selected.product_configs = config_ids;
        this.setState({
            current_selected: current_selected,
            productConfigs: config
        });
    },
    saveEdit: function () {
        var name = this.refs['name'].getValue();
        var type = this.refs['type'].getValue();
        var goods_name = this.refs['goodsName'].getValue();
        var goods_title = this.refs['goodsTitle'].getValue();
        var goods_intro = this.refs['goods_intro'].getValue();
        var supplier = this.refs['supplier'].getValue();
        var tags = this.refs['tags'].getValue();
        var productCfgs = [];
        this.state.productConfigs.map(function (config) {
            productCfgs.push(config._id);
        });
        if (!validate.noChinese(goods_name)) {
            toastr.warning(null, "商品名称不能包含汉字！");
            return false;
        }
        var config_info = {
            "type": type,
            "name": name,
            "extend_info": {
                "goodsName": goods_name,
                "goodsTitle": goods_title,
                "goods_intro": goods_intro,
                "supplier": supplier,
                "tags": tags
            },
            "product_configs": productCfgs
        }
        this.props.update(this.state.current_selected._id, config_info);

    },
    componentDidMount: function () {
        //var ob = this;
        var thisOb = this;
        var product_configs = [];
        if (this.state.current_selected) {
            var ep = new EventProxy();
            var productConfigs = this.state.current_selected.product_configs;
            ep.fail(function (err) {
                toastr.error(null, "获取配置信息出现错误");
            });
            ep.after('product_config_found', productConfigs.length, function () {
                thisOb.setState({
                    productConfigs: product_configs,
                }, function () {
                    thisOb.render();
                });
            });
            productConfigs.map(function (config) {
                HttpRequest.getProductConfigById(config).success(function (resp) {
                    if (resp.code != 500) {
                        product_configs.push(resp.data);
                        ep.emit('product_config_found');
                    } else {
                        toastr.error(null, "获取产品配置信息失败！");
                    }
                }).error(()=> {
                    toastr.error(null, "获取产品配置信息失败！");
                });
            });
        }
    },
    handleOpen: function () {
        this.refs['publish_dialog'].handleOpen();
    },
    formChanged(formEle_name){
            var form_data = this.state.form_data;
            if (formEle_name != 'name') {
                form_data.extend_info[formEle_name] = this.refs[formEle_name].getValue();
            }
            form_data[formEle_name] = this.refs[formEle_name].getValue();
            this.setState({
                form_data: form_data
            });
    },
    render: function () {
        var config_info;
        var publishConfigs = this.state.productConfigs;
        var publishConfigsName = "";
        publishConfigs.map(function (config) {
            publishConfigsName = publishConfigsName + config.name + ";";
        });

        if (this.state.current_selected) {
            config_info = this.state.current_selected;
            var icon;
            switch (config_info.type) {
                case "mk":
                    icon = <image src="/res/image/MK_h.png" style={{lineHeight:"40px",marginRight:"5px",marginTop:"-5px"}}/>;
                    break;
                case "app":
                    icon = <image src="/res/image/iphone_h.png" style={{lineHeight:"40px",marginRight:"5px",marginTop:"-5px"}}/>;
                    break;
                case "app_plugin":
                    icon = <i className="fa fa-plug" style={{fontSize:"23px"}} aria-hidden="true"/>;
                    break;
            }
        }
        else {
            return (
                <div></div>
            );
        }
        return (
            <div style={{height:"calc(100% - 20px)"}}>
                <div id="cfg_detail_edit" style={{height:"100%"}}>
                    <div
                        style={{minWidth:"530px", maxWidth:"770px",width:"95%",overflowY:"auto",maxHeight:"calc(100% - 50px)"}}>
                        <Label defaultValue={config_info.type} title="配置类型" ref="type"
                               icon={icon}/>
                        <Label defaultValue={this.state.current_project.title} title="所属项目" ref="project"/>
                        <Input defaultValue={this.state.form_data.name} ref="name" title="配置名称"
                               onBlur={function(){this.formChanged('name')}.bind(this)}/>
                        <Selector ref="productCfgs" defaultValue={publishConfigs}
                                  openSelectDialog={()=>{this.refs["product_configs_edit"].handleOpen()}} title="选择配置"/>
                        <Input defaultValue={this.state.form_data.extend_info.goodsName} ref="goodsName" title="商品名称"
                               onBlur={function(){this.formChanged('goodsName')}.bind(this)}/>
                        <Input defaultValue={this.state.form_data.extend_info.goodsTitle} ref="goodsTitle" title="商品标题"
                               onBlur={function(){this.formChanged('goodsTitle')}.bind(this)}/>
                        <Input defaultValue={this.state.form_data.extend_info.goods_intro} ref="goods_intro"
                               title="商品介绍" onBlur={function(){this.formChanged('goods_intro')}.bind(this)}/>
                        <Input defaultValue={this.state.form_data.extend_info.supplier} ref="supplier" title="提供商"
                               onBlur={function(){this.formChanged('supplier')}.bind(this)}/>
                        <Input defaultValue={this.state.form_data.extend_info.tags} ref="tags" title="商品标签"
                               onBlur={function(){this.formChanged('tags')}.bind(this)}/>

                    </div>
                    <div style={{minWidth:"530px", maxWidth:"770px",width:"97%",paddingTop:"10px"}}>

                        <div onClick={()=>{this.saveEdit()}}
                             style={{cursor:"pointer",width: "70px",height: "30px",fontSize:"13px",backgroundColor:"#303c40",padding:" 6px 16px",float:"right",marginRight:"30px"}}>
                            <span style={{letterSpacing: "2px",marginLeft:"5px",color:"white"}}>保存</span>
                        </div>
                        <div onClick={()=>{this.handleOpen()}}
                             style={{cursor:"pointer",width: "70px",height: "30px",fontSize:"13px",backgroundColor:"#303c40",padding:" 6px 16px",float:"right",marginRight:"20px"}}>
                            <span style={{letterSpacing: "2px",marginLeft:"5px",color:"white"}}>发布</span>
                        </div>
                    </div>
                </div>
                <NewPublishDlg ref="publish_dialog" current_selected={this.state.current_selected}
                               current_project={this.state.current_project}
                />
                <ProductConfigsList ref="product_configs_edit"
                                    getSelected={this.editProductConfig}
                                    current_selected={this.state.current_selected}
                                    current_project={this.state.current_project}
                                    callback={this.editProductConfig}/>
            </div>
        )
    },
});


var ProductConfigsList = React.createClass({
    getInitialState: function () {
        return ({
            current_project: this.props.current_project,
            current_selected: this.props.current_selected,
            product_configs: [],
            ListItems: []
        });
    },

    componentWillReceiveProps: function (newProps) {
        this.setState({
            current_project: newProps.current_project,
            current_selected: newProps.current_selected
        }, this.componentWillMount());
    },

    componentWillMount: function () {
        //here
        var ob = this;
        var pdct_configs = [];
        HttpRequest.getAllProductConfigs(ob.state.current_project._id).success(function (configs) {
            if (configs.code == 0) {
                configs.data.map(function (item) {
                    for (var it in this.state.current_selected.product_configs) {
                        if (this.state.current_selected.product_configs[it] == item._id) {
                            item['checked'] = true;
                            break;
                        } else {
                            item['checked'] = false;
                        }
                    }
                    //item.checked = false;
                    if (item.type == "mk_back" && this.state.current_selected.type == "mk") {
                        pdct_configs.push(item);
                    } else if ((item.type == "app_android" || item.type == "app_ios") && this.state.current_selected.type == "app") {
                        pdct_configs.push(item);
                    }else if (item.type == "app_plugin" && this.state.current_selected.type == "app_plugin") {
                        pdct_configs.push(item);
                    }
                }.bind(this));
                product_configs_all = pdct_configs;
                ob.setState({
                    product_configs: pdct_configs
                }, ob._renderList)
            }
        }.bind(this)).error(function (err) {

        });
    },
    itemSelected: function (item, index) {
        document.getElementById("dis_select_all").src = "/res/image/check.png";
        document.getElementById("select_all").src = "/res/image/check.png";
        item["checked"] = !item["checked"];
        this._renderList();
    },
    _renderList: function () {
        var items = [];
        var ob = this;
        ob.state.product_configs.map(function (item, index) {
            var checkbox = "/res/image/check.png";
            if (item.checked) {
                checkbox = "/res/image/check_h.png";
            }
            items.push(
                <div className="selector_item"
                     key={index}
                     id={"selection_"+index}
                     onClick={this.itemSelected.bind(this,item,index)}>
                    <span style={{width:"20px",height:"20px",display:"inline-block"}}>{<img src={checkbox}/>}</span>
                    <span style={{marginLeft:"10px"}}>{item.name}</span>
                </div>
            )
        }.bind(this));
        this.setState({
            ListItems: items
        });
    },
    handleClose: function () {
        this.setState({open: false});
    },
    handleOpen: function () {
        this.setState({open: true}, this.componentWillMount);
    },
    handleComplete: function () {
        var selected = [];
        this.state.product_configs.map(function (item) {
            if (item.checked) {
                selected.push(item);
            }
        });
        this.props.getSelected(selected);
        this.handleClose();
    },
    search: function () {
        var input = document.getElementById("publishcfg_search_input").value;
        var configs = product_configs_all;
        var configsFiltered = [];
        if (input.length > 0) {
            for (var i = 0; i < configs.length; i++) {
                if (configs[i].name.indexOf(input) >= 0) {
                    configsFiltered.push(configs[i]);
                }

            }
        } else {
            configsFiltered = configs;
        }
        this.setState({
            product_configs: configsFiltered,
        }, this._renderList);
    },
    disSelectAll: function () {
        var chec = document.getElementById("dis_select_all").src;
        if (chec == "/res/image/check_h.png") {
            document.getElementById("dis_select_all").src = "/res/image/check.png";
        } else {
            document.getElementById("select_all").src = "/res/image/check.png";
            document.getElementById("dis_select_all").src = "/res/image/check_h.png";
        }

        var product_configs = this.state.product_configs;
        product_configs.map(function (item) {
            item.checked = false;
        });
        this.setState({
            product_configs: product_configs
        }, this._renderList);
    },
    selectAll: function () {
        var chec = document.getElementById("select_all").src;
        if (chec == "/res/image/check_h.png") {
            document.getElementById("select_all").src = "/res/image/check.png";
        } else {
            document.getElementById("dis_select_all").src = "/res/image/check.png";
            document.getElementById("select_all").src = "/res/image/check_h.png";
        }
        var product_configs = this.state.product_configs;
        product_configs.map(function (item) {
            item.checked = true;
        });
        this.setState({
            product_configs: product_configs
        }, this._renderList);
    },
    render: function () {
        return (
            <div>
                <Modal
                    show={this.state.open}
                    style={{borderRadius:"0"}}
                >
                    <Modal.Header style={{background:"#383F45"}}>
                        <Modal.Title style={{color:"white"}}>
                            <img src="/res/image/select.png" style={{float:"left"}}/>
                            <span style={{marginLeft: "10px",letterSpacing:"2px"}}>选择</span>
                            <img src="/res/image/close.png" style={{float:"right",cursor:"pointer",marginTop:" 5.5px"}}
                                 onClick={this.handleClose}/>
                        </Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <div>
                            <div
                                style={{width:"460px",height:"35px",border:"solid 1px lightgray",marginBottom:"18px"}}>
                                <input type="text" placeholder="输入您要搜索的内容" id="publishcfg_search_input"
                                       onChange={this.search}
                                       style={{width: "420px",height:"30px",border: "none",float: "left",outline: "none",paddingLeft:"20px"}}/>
                            <span className="glyphicon glyphicon-search"
                                  style={{float:"right",height:"20px",width: "20px",marginTop: "6px",marginRight: "10px",fontSize:"20px",marginBottom: "auto"}}
                                  aria-hidden="true"/>
                            </div>
                            <div className="selector_dialog_body">
                                {this.state.ListItems}
                            </div>
                        </div>
                        <div style={{ fontFamily:'Microsoft YaHei',fontSize:"15px",marginTop:"10px"}}>
                                <span style={{width:"20px",height:"20px",display:"inline-block"}}
                                      onClick={this.selectAll}>
                                    <img id="select_all" src="/res/image/check.png"/>
                                </span>
                            <span style={{marginLeft:"10px"}}>全选</span>
                                <span style={{width:"20px",height:"20px",display:"inline-block",marginLeft:"20px"}}
                                      onClick={this.disSelectAll}>
                                    <img id="dis_select_all" src="/res/image/check.png"/>
                                </span>
                            <span style={{marginLeft:"10px"}}>全不选</span>
                        </div>
                    </Modal.Body>
                    <Modal.Footer style={{borderTop:"none"}}>
                        <Button
                            onClick={this.handleComplete}
                            style={{backgroundColor: "#383F45", borderColor: "#383F45",width:"70px"}}
                            bsStyle="primary">完成</Button>
                    </Modal.Footer>
                </Modal>
            </div>
        );
    }

});
var NewPublishDlg = React.createClass({
    getInitialState: function () {
        return ({
            current_project: this.props.current_project,
            current_selected: this.props.current_selected
        });
    },

    componentWillReceiveProps: function (newProps) {
        var productsConfigs = "";
        this.setState({
            current_project: newProps.current_project,
            current_selected: newProps.current_selected
        }, function () {
            this.componentDidMount();
        });

    },

    componentDidMount: function () {
        this.render();
    },
    handleOpen: function () {
        this.setState({open: true});
    },
    handleClose: function () {
        this.setState({open: false});
    },
    publish: function () {
        var thisOb = this;
        var publishConfig_id = this.state.current_selected._id;
        var publishName = this.refs['publish_name'].getValue() || this.state.current_selected.extend_info.goodsName;
        var publishDescription = this.refs['publish_description'].getValue();
        var version = this.refs['publish_version'].getValue();
        var goods_privacy = this.refs['goods_privacy'].getValue();
        var type = this.state.current_selected.type;
        var goodsName = this.state.current_selected.extend_info.goodsName;
        var goodsTitle = this.state.current_selected.extend_info.goodsTitle;
        var goods_intro = this.state.current_selected.extend_info.goods_intro;
        var supplier = this.state.current_selected.extend_info.supplier;
        var tags = this.state.current_selected.extend_info.tags;
        var goods_dependencies = [];
        var custom_data = "";
        var goods_img = "http://bos4beecode.duapp.com/loadfile?id=code.jpg";
        var productsInfo;
        HttpRequest.getGoodsInfo(publishConfig_id).success(function (resp) {
            if (resp.code == 500) {
                thisOb.handleClose();
                toastr.error(null, resp.message.err);
            } else {
                productsInfo = resp.data.productsInfo;
                var postData = {
                    "publishConfig_id": publishConfig_id,
                    "publishName": publishName,
                    "publishDescription": publishDescription,
                    "type": type,
                    "version": version,
                    "productsInfo": productsInfo,
                    "goodsName": goodsName,
                    "goodsTitle": goodsTitle,
                    "goods_intro": goods_intro,
                    "supplier": "supplier",
                    "tags": tags,
                    "goods_dependencies": goods_dependencies,
                    "custom_data": custom_data,
                    "goods_img": goods_img,
                    "goods_privacy": goods_privacy
                };
                thisOb.handleClose();
                toastr.success(null, '商品发布中...');
                HttpRequest.publish(postData).success(function (resp) {
                    if (resp.code == 500) {
                        toastr.error(null, '发布失败')
                    } else if (resp.code == 200) {
                        let task_id = resp.data.task_id;
                        toastr.success(null, resp.data.msg);
                        msgFrontAgent.order(task_id, function (data) {
                            if (data.err) {
                                toastr.error(null, data.err.message, {timeOut: 0});
                            } else {
                                toastr.success(null, "商品发布完成", {timeOut: 0});
                            }
                        });
                    }
                }).error(function (err) {
                    toastr.error(null, '发布失败')
                });
            }
        }).error(function (error) {
            toastr.error(null, '获取产品信息失败');
            thisOb.handleClose();
        });
    },

    render: function () {
        return (
            <div>
                <Modal
                    show={this.state.open}
                >
                    <Modal.Header>
                        <Modal.Title >商品发布</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <div>
                            <BSInput ref="publish_name" bsSize="small" type="text" label="名称" placeholder="请输入本次发布名称"
                                     defaultValue={this.state.current_selected.extend_info.goodsName}/>
                            <BSInput ref="publish_version" bsSize="small" type="text" label="版本"
                                     placeholder="请输入本次发布版本号"/>
                            <BSInput ref="publish_description" bsSize="small" type="text" label="描述"
                                     placeholder="请输入本次发布描述信息"/>
                            <BSInput ref="goods_privacy" bsSize="small" type="select" label="是否私有"
                                     defaultValue="false">
                                <option value="false">false</option>
                                <option value="true">true</option>
                            </BSInput>
                        </div>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.handleClose}
                                style={{backgroundColor: "#555", borderColor: "#555",width:"70px",margin:'12'}}
                                bsStyle="primary">取消</Button>
                        <Button onClick={this.publish}
                                style={{backgroundColor: "#555", borderColor: "#555",width:"70px",margin:'12'}}
                                bsStyle="primary">完成</Button>
                    </Modal.Footer>
                </Modal>

            </div>
        );
    }
});